:root {
  --card-width: 182px;
  --card-height: 254px;
  --card-border-color: black;

  --header-font-size:24px;
  --link-font-size:18px;

}

.panel-root{
  display: flex;
  flex-direction: row;
  justify-content: center;

  flex-wrap: wrap;
}

.panel-card{
  background-color: white;
  border: 1px dashed var(--card-border-color);

  display: flex;
  flex-direction: column;
  justify-content:flex-end;

  width: var(--card-width);
  height: var(--card-height);
  
  margin: 5px;
  overflow: hidden;
}
  .panel-card img{
    width: 100%;
    /* height: 85%; */
  }

  .panel-card .header{
    font-weight: bold;
    font-size: var(--header-font-size);
  }

  .panel-card .header:hover{
    cursor: pointer;
    color: gold;
    text-decoration:underline;
  }

  .panel-card .author{
    font-style: italic;
    font-size: var(--link-font-size);
  }

  .panel-card .author:hover{
    cursor: pointer;
    color: blue;
    text-decoration: underline;
  }

  .panel-card button{
    background: none;
    border: none;
    text-decoration: underline;
    margin-left: auto;
  }

  .panel-card button:hover{
    cursor: pointer;
    color: #1982cc;
  }

  .panel-card .brief{
    position: absolute;
    float:left;

    max-width: var(--card-width);

    text-align: left;
    font-style: italic;
    color: red;
    padding: 8px;
    background-color: bisque;
  }

.hidden{
  display: none;
}
